<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="http://localhost:8080/Barbr/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            let info = {
                "username": "",
                "telephone": "",
                "booktime": "",
                "project": ""
            };
            $("#op").on("click", "button[id='book']", function () {
                let that = this;
                alert("预约成功!");
                info.username = $("#username").text();
                info.telephone = $("#tel").text();
                info.booktime = $("input[name='booktime']").val();
                info.project = $("select[name='type'] option:selected").val();
                $.ajax({
                    url: "http://localhost:8080/Barbr/bookProject?action=book",
                    data: info,
                    type: "post",
                    cache: false,
                    success(data) {
                        that.remove();
                        $("#op").append("<button id='cancle'>取消预约</button>");
                        $("#op").append("<button id='updatetime'>修改时间</button>");
                    },
                    error() {
                        alert("err");
                    }
                });
            });
            $("#op").on("click", "button[id='cancle']", function () {
                let that = this;
                $.ajax({
                    url: "http://localhost:8080/Barbr/bookProject?action=cancel",
                    data: {"telephone":info.telephone,"project":info.project},
                    type: "post",
                    cache: false,
                    success(data) {
                        alert("取消成功!");
                        that.remove();
                        $("#updatetime").remove();
                        $("#op").append("<button id='book'>预约</button>");
                    },
                    error() {
                        alert("err");
                    }
                });

            });
            $("#op").on("click", "button[id='updatetime']", function () {
                alert("修改时间");
            });
        });
    </script>
    <style>
        * {
            font: 14px Helvetica, Helvetica, Tahoma, Arial, sans-serif;
            border: 0;
            padding: 0;
            margin: 0;
        }
        .table-wrap {
            width: 100%;
            margin-left: 29%;
        }

        thead {
            background-color: #e7e7e7;
        }

        span {

            margin-left:200px;
            text-align: center;
            background-color: #e7e7e7;
            font-size: 1.5em;
        }

        table {
            border: 1px solid black;
        }

        #op button,
        #data input,
        select {
            cursor: pointer;
        }

        #op button,
        select {
            background-color: #009688;
            color: white;
        }
    </style>
</head>

<body>
    <div class="table-wrap">
        <div class="tableborder">
            <span>预约</span>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>客户姓名</th>
                        <th>客户手机</th>
                        <th>预约时间</th>
                        <th>预约项目</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td id="username">${sessionScope.customer.username}</td>
                        <td id="tel">${sessionScope.customer.tellphone}</td>
                        <td id="data"><input type="datetime-local" name="booktime" /></td>
                        <td>
                            <select name="type">
                                <option value="剪发">剪发</option>
                                <option value="洗发">洗发</option>
                                <option value="烫发">烫发</option>
                                <option value="染发">染发</option>
                                <option value="护理">护理</option>
                                <option value="补发根">补发根</option>
                                <option value="黑油">黑油</option>
                            </select>
                        </td>
                        <td id="op"><button id="book">预约</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>